import { Star, Plus } from "lucide-react"
import { PlaylistCard } from "@/components/playlist-card"
import { EmptyState } from "./empty-state"
import { PlaylistCardSkeleton } from "../skeletons/playlist-card-skeleton"
import { Button } from "@/components/ui/button"
import type { Playlist } from "@/types/playlist"

interface PlaylistsTabProps {
  playlists: Playlist[]
  isLoading?: boolean
}

export function PlaylistsTab({ playlists, isLoading = false }: PlaylistsTabProps) {
  return (
    <div>
      {isLoading ? (
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
          {Array(10)
            .fill(0)
            .map((_, i) => (
              <PlaylistCardSkeleton key={i} />
            ))}
        </div>
      ) : playlists.length > 0 ? (
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
          {playlists.map((playlist) => (
            <PlaylistCard key={playlist.id} playlist={playlist} />
          ))}
        </div>
      ) : (
        <EmptyState
          icon={<Star className="h-16 w-16 text-yellow-400" />}
          title="暂无创建的歌单"
          description="创建一个属于你的歌单吧"
          action={
            <Button className="mt-4" size="sm">
              <Plus className="mr-2 h-4 w-4" />
              创建歌单
            </Button>
          }
        />
      )}
    </div>
  )
}

